<script setup lang="ts">
const { t } = useI18n();
const lstr = computed(() => t('tips', { dom: 'hi' }));
</script>

<template>
  <div css:bg="light-800" class="p-4 m-2">
    <h1>{{ t('hello-parent') }}</h1>
    <div style="text-align: center">{{ t('global-hello') }}, {{ t('hello-sub') }}</div>
    <p>{{ lstr }}</p>
  </div>
</template>

<style scoped lang="scss"></style>

<i18n>
{
  "en": {
    "hello-sub": "I am a sublevel language!"
  },
  "zh-CN": {
    "hello-sub": "我是子层语言！"
  },
  "zh-TW": {
    "hello-sub": "我是子層語言！"
  },
  "ja": {
    "hello-sub": "私はサブレベルの言語です！"
  }
}
</i18n>
